import React, {useState, useCallback, useEffect, useMemo} from 'react';
import {Empty, Spin} from 'antd';
import {usePersistFn} from 'ahooks';
import {cloneDeep} from 'lodash';
import {roomDetail} from '~/service/liveMonitor';
import TrendChart from '../../common/trendChart';
import SearchSelect from '../../common/SearchSelect';
import TrendChartDoubleY from '../../common/trendChartDoubleY';
import CommonCard from '../../common/CommonCard';
import {dimensionMap, chartMap} from '../../config.js';
import './index.styl';

const formatPointToPercent = value => `${Number(value * 100)}%`;

const XmppSelectName = 'StreamingMediaMonitoring_PartTwo_select_xmpp';

const withApiChart = Element => props => {
    const {
        searchParams = [],
        title,
        value = '',
        selectName,
        setFormLoading = () => {},
        ...restProps
    } = props;
    const [lineUnit, setLineUnit] = useState({});
    const [loading, setLoading] = useState(false);


    const run = usePersistFn(
        (params, selectName, value, title) => {

            const {dashBoardId, unitId} = chartMap.get(title);
            const dashBoardList = [
                {
                    dashBoardId,
                    dashBoardName: dashBoardId
                }
            ];
            const dimensionAndValues = cloneDeep(params);

            if (selectName) {
                dimensionAndValues.push({
                    dimensionId: selectName,
                    dimensionName: dimensionMap.get(selectName).dimensionName,
                    value: [value]
                });
            }

            const resultParams = {
                dashBoardList,
                dimensionAndValues
            };

            setLoading(true);
            setFormLoading(true);
            roomDetail(resultParams).then(res => {
                const {
                    data
                } = res;
                let lineUnit = {};
                if (data && data[dashBoardId] && data[dashBoardId][unitId]) {
                    lineUnit = data[dashBoardId][unitId];
                }
                setLineUnit(lineUnit);
                setLoading(false);
                setFormLoading(false);
            });
        }
    );

    useEffect(() => {
        if (searchParams.length > 0) {
            run(searchParams, selectName, value, title);
        }
    }, [searchParams, run, value, selectName, title]);


    return (
        <>
            {
                (Object.keys(lineUnit || {})?.length > 0 && lineUnit?.chart)
                    ? (
                        <Element
                            {...restProps}
                            chartData={lineUnit}
                            loading={loading}
                        />
                    )
                    : <Spin spinning={loading}><Empty image={Empty.PRESENTED_IMAGE_SIMPLE} /></Spin>
            }
        </>
    );
};


const ChartsContainer = ({searchParams, setFormLoading}) => {

    const SingleChart = useMemo(() => withApiChart(TrendChart), []);
    const DoubleChart = useMemo(() => withApiChart(TrendChartDoubleY), []);


    const [xmppValue, setXmppValue] = useState('全部');


    return (
        <>
            <CommonCard title="拉流成功率">
                <SingleChart
                    searchParams={searchParams}
                    title="拉流成功率"
                    yAxisLabel={{formatter: '{value}'}}
                    dataZoom
                    gridBottom={80}
                    setFormLoading={setFormLoading}
                />
            </CommonCard>
            <CommonCard title="XMPP服务器监控">
                <div className="xmpp-select">
                    XMPP服务器地址：
                    <SearchSelect
                        selectName={XmppSelectName}
                        value={xmppValue}
                        setValue={setXmppValue}
                    />
                </div>
                <DoubleChart
                    searchParams={searchParams}
                    title="XMPP服务器监控"
                    rightYAxisLabel={{formatter: '{value}'}}
                    value={xmppValue}
                    selectName={XmppSelectName}
                    dataZoom
                    gridBottom={80}
                    setFormLoading={setFormLoading}
                />
            </CommonCard>
            <CommonCard title="SFU服务器监控">
                <DoubleChart
                    searchParams={searchParams}
                    title="SFU服务器监控"
                    rightYAxisLabel={{formatter: '{value}'}}
                    dataZoom
                    gridBottom={80}
                    setFormLoading={setFormLoading}
                />
            </CommonCard>

        </>
    );
};

export default ChartsContainer;
